<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四川大广赛贺卡生成</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 页面1: 介绍页 -->
    <div id="page1" class="page active">
        <div class="intro-container">
            <h1>四川大广赛</h1>
            <p>大广赛是由教育部高等学校新闻传播学类专业教学指导委员会等单位主办的全国性大学生广告艺术大型赛事。</p>
            <p>大赛旨在提高大学生的创新精神和实践能力，激发大学生的创意灵感，促进产学研结合。</p>
            <p>四川赛区自举办以来，吸引了众多高校学生积极参与，涌现出大量优秀作品。</p>
            <button id="startBtn" class="primary-btn">获取专属贺卡</button>
        </div>
    </div>

    <!-- 页面2: 信息查询页 -->
    <div id="page2" class="page">
        <div class="query-container">
            <h2>查询获奖信息</h2>
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" placeholder="请输入您的姓名">
            </div>
            <div class="form-group">
                <label for="school">学校</label>
                <input type="text" id="school" placeholder="请输入您的学校">
            </div>
            <div class="error-message" id="errorMsg"></div>
            <button id="queryBtn" class="primary-btn">查询</button>
            <button id="backBtn" class="secondary-btn">返回</button>
        </div>
    </div>

    <!-- 页面3: 贺卡生成页 -->
    <div id="page3" class="page">
        <div class="card-container">
            <h2>选择贺卡样式</h2>
            <div class="card-options">
                <div class="card-style" data-style="1">
                    <img src="https://via.placeholder.com/200x300/FFE0B2/000000?text=样式1" alt="贺卡样式1">
                    <p>喜庆红</p>
                </div>
                <div class="card-style" data-style="2">
                    <img src="https://via.placeholder.com/200x300/E3F2FD/000000?text=样式2" alt="贺卡样式2">
                    <p>清新蓝</p>
                </div>
                <div class="card-style" data-style="3">
                    <img src="https://via.placeholder.com/200x300/E8F5E9/000000?text=样式3" alt="贺卡样式3">
                    <p>自然绿</p>
                </div>
                <div class="card-style" data-style="4">
                    <img src="https://via.placeholder.com/200x300/F3E5F5/000000?text=样式4" alt="贺卡样式4">
                    <p>优雅紫</p>
                </div>
            </div>
            
            <div id="cardPreview" class="card-preview">
                <div id="cardContent" class="card-content">
                    <!-- 贺卡内容将通过JS动态生成 -->
                </div>
            </div>
            
            <button id="saveBtn" class="primary-btn" style="display:none;">保存到相册</button>
            <button id="backToQueryBtn" class="secondary-btn">返回查询</button>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
    <script src="script.js"></script>
</body>
</html>